<template>
    <div class="map-container" v-if="isShow">
        <div class="group">
            <a-icon type="close" @click="hide" />
            <div class="input-wrapper">
                <div>
                    <span>当前地址:</span>
                    <a-input v-model="info" placeholder="当前的地址" size="default">
                        <a-icon slot="prefix" type="environment" />
                    </a-input>
                </div>
                <div>
                    <span>搜索地址:</span>
                    <el-amap-search-box
                        class="search-box"
                        :search-option="searchOption"
                        :on-search-result="onSearchResult"
                    ></el-amap-search-box>
                </div>
            </div>
            <div class="amap-wrapper">
                <el-amap class="amap-box" :center="center" :vid="'amap-vue'" ref="map" :events="events">
                    <el-amap-marker
                        vid="component-marker"
                        :position="makerConf.position"
                        :content="makerConf.content"
                        :draggable="true"
                        :clickable="true"
                        :events="markerEvents"
                    ></el-amap-marker>
                </el-amap>
            </div>
            <div class="footer">
                <a-button type="primary" @click="handleClick">确定</a-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AmapPage',
    components: {},
    props: {
        isShow: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        cityInfo: {
            type: Object,
            default: () => {
                return {
                    address: '',
                    latitude: '',
                    longitude: '',
                    province: '',
                    city: '',
                    area: ''
                }
            }
        }
    },
    data () {
        const self = this
        // self.city = self.city || '成都'
        return {
            zoom: 16,
            center: [],
            info: '',
            searchOption: {
                city: '全国',
                citylimit: false
            },
            cityObj: {
                address: '',
                latitude: '',
                longitude: '',
                province: '',
                city: '',
                area: ''
            },
            events: {
                click: (e) => {
                    self.center = [e.lnglat.lng, e.lnglat.lat]
                    self.makerConf.position = [e.lnglat.lng, e.lnglat.lat]
                    self.getList([e.lnglat.lng, e.lnglat.lat])
                }
            },
            markerEvents: {
                dragend: (e) => {
                    const lnglat = e.target.getPosition()
                    self.getList([lnglat.lng, lnglat.lat])
                },
                click: (e) => {
                    const lnglat = e.target.getPosition()
                    self.getList([lnglat.lng, lnglat.lat])
                }
            },
            makerConf: {
                position: [],
                content: ''
            },
            plugin: [
                'ToolBar',
                'Scale',
                {
                    pName: 'Geolocation',
                    showMarker: true,
                    events: {
                        init (o) {
                            o.getCurrentPosition((status, result) => {
                                if (result && result.position) {
                                    // const lng = result.position.lng
                                    // const lat = result.position.lat
                                }
                            })
                        },
                        complete (result) {
                            // 定位成功
                            // const address = result.formattedAddress
                            const point = result.position
                            // const obj = {
                            //     address,
                            //     name: '',
                            //     location: point
                            // }
                            self.makerConf.position = [point.lng, point.lat]
                        },
                        error () {}
                    }
                }
            ]
        }
    },
    watch: {
        cityInfo: {
            deep: true,
            immediate: true,
            handler (val) {
                if (val.longitude === '' || val.latitude === '') {
                    this.makerConf.position = [104.066301, 30.572961]
                    this.center = [104.066301, 30.572961]
                } else {
                    this.makerConf.position = [val.longitude, val.latitude]
                    this.center = [val.longitude, val.latitude]
                }
                this.info = val.address
            }
        }
    },
    methods: {
        hide () {
            this.$emit('hide')
        },
        handleClick () {
            this.$emit('Mapok', this.cityObj)
        },
        getList (result) {
            const that = this
            // 获取列表
            this.$Geocoder({
                lnglatXY: result,
                success (res) {
                    if (res.regeocode && res.regeocode.addressComponent) {
                        const { province, city, district, township } = res.regeocode.addressComponent
                        that.info = res.regeocode.formattedAddress || province + city + district + township
                        that.center = result
                        that.makerConf.position = result
                        that.cityObj = {
                            address: res.regeocode.formattedAddress,
                            province,
                            city,
                            area: district,
                            latitude: result[1],
                            longitude: result[0]
                        }
                    }
                },
                error (res) {
                    console.log(res)
                }
            })
        },

        $Geocoder (options) {
            // 将坐标点转化为，详细地址
            options = options || {}
            if (AMap) {
                AMap.plugin(['AMap.Geocoder'], () => {
                    const geocoder = new AMap.Geocoder({
                        radius: options.radius || 1000,
                        extensions: options.extensions || 'all'
                    })
                    const lnglatXY = options.lnglatXY // 已知点坐标
                    geocoder.getAddress(lnglatXY, function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            options.success && options.success(result)
                        } else {
                            options.error && options.error(status, result)
                        }
                    })
                })
            }
        },
        onSearchResult (pois) {
            if (pois.length > 0) {
                const { lng, lat } = pois[0].location
                this.getList([lng, lat])
            }
        }
    }
}
</script>

<style lang="less" scoped>
.map-container {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 88;
    .group {
        background-color: #fff;
        width: 8rem;
        display: flex;
        flex-direction: column;
        padding: 0.1rem;
        position: relative;
        .anticon-close {
            position: absolute;
            top: 0.1rem;
            right: 0.1rem;
            font-size: 0.24rem;
            color: #999999;
            cursor: pointer;
            svg {
                width: 0.32rem;
                height: 0.32rem;
            }
        }
    }
    .input-wrapper {
        display: flex;
        flex-direction: column;
        & > div {
            display: flex;
            align-items: center;
            margin-top: 0.2rem;
            ::v-deep {
                .ant-input-affix-wrapper,
                .el-vue-search-box-container {
                    width: 6rem;
                    margin-left: 0.2rem;
                }
                .el-vue-search-box-container {
                    height: 32px;
                    border: 1px solid #f1f0f5;
                    border-radius: 4px;
                    transition: all 0.3s;
                    box-shadow: none;
                    &:hover,
                    &:focus {
                        border-color: @primary-color;
                    }
                    .search-btn {
                        display: inline-block;
                        width: 60px;
                        background: @primary-color;
                        border-radius: 0 4px 4px 0;
                        color: #ffffff;
                        text-align: center;
                        line-height: 32px;
                    }
                }
            }
        }
    }
    .amap-wrapper {
        width: 100%;
        height: 6rem;
        padding: 0.1rem;
        margin-top: 0.2rem;
    }
    .footer {
        display: flex;
        justify-content: flex-end;
    }
}
</style>
